<template>
	<div class="setting-cell">
		<div class="s-left">{{ title }}</div>
		<div class="s-right">
			<image  class="pic" :src="value" alt="" :lazy-load="true" v-if="mode === 'pic'" />
			<div class="txt" :class="{
				active: active
			}" v-if="!mode || mode === 'text'">{{ value }}</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		mode: {
			type: String,
			default: () => {
				return 'text';
			},
			validator: value => {
				return ['text', 'pic'].indexOf(value) !== -1;
			}
		},
		value: {
			type: String,
			default: () => {
				return '';
			}
		},
		title: {
			type: String
		},
		active: {
			type: Boolean,
			default: () => {
				return false
			}
		}
	},
	methods: {
		handlerUploadPic() {
			let that = this;
			that.$httpRequest.handlerUploadPic(res => {
				if (res) {
					this.$emit('changeAvatar', res.url);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.setting-cell {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 99upx;
	border-bottom: 1px solid #ebebeb;
	.s-left {
		font-size: 30upx;
		color: #000;
		line-height: 1;
	}
	.s-right {
		font-size: 0;
		.pic {
			width: 60upx;
			height: 60upx;
		}
		.txt {
			font-size: 30upx;
			line-height: 1;
			color: #999;
		}
		.active {
			color: $uni-color-qian !important;
			text-underline: $uni-color-qian;
			text-decoration: underline;
		}
	}
}
</style>
